<template>
  <div class="blank-adaptive" ref="root" :style="rootStyle">
    <slot></slot>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

/**
 * 最理想的情况是容器宽高等于设计稿宽高，但实际实际情况是不相等的，可能导致两边都留白、两边都滚动或一边滚动一边留白，以上情况都不是期望的。
 * 此组件旨在至少保证宽或高刚好铺满，而另一边则采取留白策略。宽或高铺满则可能改变设计稿宽高，令其按照铺满的比例进行缩放
 */
export default defineComponent({
  name: 'ArkBlankAdaptive',
  props: {
    // 设计稿宽度px
    designWidth: {
      type: Number,
      default: 1920,
    },
    // 设计稿高度px
    designHeight: {
      type: Number,
      default: 1080,
    }
  },
  computed: {
    rootStyle() {
      return {
        width: `${this.designWidth}px`,
        height: `${this.designHeight}px`,
      };
    }
  },
  mounted() {
    this.calcScaleValue();
    window.addEventListener('resize', () => {
      window.requestAnimationFrame(() => {
        this.calcScaleValue();
      });
    });
  },
  beforeUnmount() {
    window.removeEventListener('resize', () => {
      window.requestAnimationFrame(() => {
        this.calcScaleValue();
      });
    });
  },
  methods: {
    calcScaleValue() {
      // 设计宽高
      const designWidth = this.designWidth;
      const designHeight = this.designHeight;

      // 实际宽高
      const actualWidth = window.innerWidth;
      const actualHeight = window.innerHeight;

      // 缩放比例
      let scale = 1;

      // 比较设置宽高比designWHRate和实际宽高比actualWHRate的目的是判断按照宽计算缩放比例还是高计算缩放比例（留白的关键思路，逻辑抽象通过画图更好理解）
      const designWHRate = parseFloat((designWidth / designHeight).toFixed(5));
      const actualWHRate = parseFloat((actualWidth / actualHeight).toFixed(5));
      if (designWHRate < actualWHRate) { // 高铺满并水平居中
        scale = parseFloat((actualHeight / designHeight).toFixed(5));
      } else { // 宽铺满并垂直居中
        scale = parseFloat((actualWidth / designWidth).toFixed(5));
      }

      this.$refs.root.style.transform = `scale(${scale}) translate(-50%, -50%)`;
    }
  }
});
</script>

<style scoped>
.blank-adaptive {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 受到scale的影响，变换中心不一定在中间，不要用center */
  transform-origin: left top;

  /* translate: -50% -50%和transform: translate(-50%, -50%)的偏移效果在此处不同？？？ */
}
</style>